<script setup>
import Carousel from '@/components/Carousel.vue';
</script>

<template>
  <div class="second-page">
    <div class="left-part1">
      <Carousel></Carousel>
    </div>
    <div class="right-part1">
      <h1># {{ $t("title1") }}</h1>
      <p>{{ $t("text1") }}</p>
    </div>
  </div>
</template>

<style scope>
.second-page {
  width: 100%;
  height: 100vh;
  background: linear-gradient(to bottom,
      rgba(247, 49, 4, 0.2) 0%,
      rgba(33, 150, 243, 0.3) 100%
    );
  position: relative;
  overflow: hidden;
}

.second-page::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0.1) 25%,
      rgba(247, 49, 4, 0.15) 50%,
      rgba(255, 255, 255, 0.1) 75%);
  animation: flow 8s linear infinite;
  transform: rotate(15deg);
}

@keyframes flow {
  0% {
    transform: rotate(15deg) translate(-50%, -50%);
  }

  100% {
    transform: rotate(15deg) translate(50%, 50%);
  }
}

.right-part1{
  position: absolute;
  top: 20%;
  left: 68%;
  right: 1%;
}
.right-part1 h1 {
  position: relative;
  font-size: 2.5rem;
  color: var(--txcolor);
}

.right-part1 p {
  position: relative;
  padding: 6% 0 0 0;
  line-height: 2.5;
}
</style>